<template>
<view class="index" style=" background-color: #ffffff;width: 22.2rem;">
	
		<cu-custom :bgColor="NavBarColor" :isBack="true" backFlag="navigate">
			<block slot="backText">返回</block>
		</cu-custom>
		
		<view class="cu-list menu margin-top">
			
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<view class="content">
					<text class="text-black title ">任务名称:</text>
				</view>
				<view class="action">
					<text class="text-black title ">{{reception.taskName}}</text>
				</view>
			</view>
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				
				<view style="width: 6rem;">
					<text class="text-black title ">任务描述:</text>
				</view>
					
				<view>
					<text class="text-black title ">{{reception.taskDescription}}</text>
				</view>
			</view>
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<view style="width: 6rem;">
					<text class="text-black title ">所有负责人:</text>
				</view>
				<view class="action">
					<text class="text-black title ">{{reception.userId}}</text>
				</view>
			</view>
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<view class="content">
					<text class="text-black title ">起始时间:</text>
				</view>
				<view class="action">
					<text class="text-black title ">{{formatDate(reception.startingTime,16)}}</text>
				</view>
			</view>
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<view class="content">
					<text class="text-black title ">截止时间:</text>
				</view> 
				<view class="action">
					<text class="text-black title ">{{formatDate(reception.deadlineTime,16)}}</text>
				</view>
			</view>
			
			<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
				<view style="width: 3rem;">
					<text class="text-black title ">进度:</text>
				</view> 
				
				<view style="width: 17rem; height: 0.3rem;" >
					<view style="width: 15rem; margin-left:0rem; margin-top: ; height:0.2rem;">
						<u-slider 
							style="margin-top: 0.5rem;" 
							step="5" 
							v-model="uslider" 
							showValue
							activeColor="#3c9cff" 
							:min="mins"
							max="100" 
							inactiveColor="#c0c4cc"
							block-width="40"
							@input="progress"
						>
						</u-slider>
						<text class="text-black title " style="position: absolute;left:19.9rem;">{{uslider}}%</text>
					</view>			
				</view>
				
			</view>
		</view>
		
		<view class="cu-list menu margin-top" style="margin-top: 0.1rem;">
			<form>
				<view class="cu-form-group">
				
					<textarea 
						style="border:solid 1px #3c9cff; border-radius:8px; resize:none; margin-left: 1rem;height:70px;overflow:auto" 
						placeholder-style="position: absolute;left:1.2rem;top:0.7rem" 
						placeholder="请输入当前进度描述" 
						name="input" 
						
						v-model="taskRecordFrom.progressDescription">
					</textarea>
					<!-- <u-button style="width: 2rem; height: 3rem; margin-left:0.1rem ;"ripple class="custom-style" @click="onSubmit"> 上传</u-button> -->
				</view>
				
				<view class="cu-form-group">
					<view class="title">照片</view>
					<view class="grid col-4 grid-square flex-sub">														
						<view class="bg-img" v-for="(item,index) in tempFileList"  @tap="ViewImage(item.path,index)">									
						<view class="feedback-image-item" :key="item.path">
							<image :src="item.path" class="feedback-image-icon"></image>
							<view class="cu-tag bg-red radius" @tap.stop="DelImg(index)">
								<text class='cuIcon-close'></text>
							</view>
						</view>
					</view>									
					<view class="solids" @tap="ChooseImage">
						<text class='cuIcon-cameraaddfill'></text>
					</view>
					</view>
				</view>	
				
				<view class="cu-form-group">
					<view class="title">视频</view>
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-show="showVideo" >
							<video :src="src" mode="aspectFill"  style="width: 130rpx;height: 130rpx;"></video>
						</view>
						<view class="solids" @tap="chooseVideo" >
							<text class='cuIcon-cameraaddfill'></text>
						</view>
					</view>
				</view>
				
				<view>
					<u-button 
						style="width: 7rem; height: 2rem; margin-top:0rem; background-color:#74D6A7;"
						ripple 
						class="custom-style" 
						@click="onSubmit"
						> 
						上传</u-button>
				</view>
			</form>	
		</view>
		
		<view style="width: 20rem;margin-left:2rem;">
			
			<u-time-line v-for="item in timelineList">
			    <u-time-line-item >
			        <!-- 此处自定义了左边内容，用一个图标替代 -->
					            <template v-slot:node>
					                <view class="u-node" style="background: #19be6b;">
					                    <!-- 此处为uView的icon组件 -->
					                    <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
					                </view>
					            </template>
			        <template v-slot:content >
			            <view>
			                <view class="u-order-title">{{item.advanceProgress}}%</view>
							<view class="u-order-desc">负责人:&nbsp;{{item.userName}}</view>
			                <view class="u-order-desc">{{item.progressDescription}}</view>
			                <view class="u-order-time">{{item.updateTime}}</view>
			            </view>
			        </template>
			    </u-time-line-item>
			</u-time-line>
			
		</view>
		
	</view>
</template>

<script>
	

		
	export default {
		data() {
			return {
				src:"",//视频存放
				cameraIndex: 0,
				cameraList: [{
								value: 'back',
				                name: '后置摄像头',
				                checked: 'true'
				            },
				            {
				                value: 'front',
				                name: '前置摄像头'
				                },
				            ],
				showVideo:false,
				tempFileList:[],//储存页面展示的
				imgList: [],//储存点击大图展示的
				timelineList:[],//时间轴数据
				taskRecordFrom:{
					taskId:'',//任务id
					taskName:'',//任务名称
					taskDescription:'',//任务描述
					advanceProgress:'',//当前进度
					progressDescription:'',//进度描述
					recordPic:'',//图片   储存返回给后端的图片id地址
					reportVideo:'',//视频  储存返回给后端的数据
				},
				mins:"",
				uslider:0,
				jd:0,//存储刚进来时的进度
				NavBarColor:this.NavBarColor,
				reception:{
					id:"",// 任务id
					devid:"",//公司编号
					devname:"",//公司名称
					taskName:"",//任务名称
					taskDescription:"",//任务描述
					startingTime:"",//起始时间
					deadlineTime:"",//截止时间
					delayTime:"",//延迟时间
					userId:"",//所有负责人名称
					taskState:"",//任务状态
					taskProgressBar:"",//任务总进度
					userNameId:"",//负责人名称
				},
				url:"/api/v1/appbusiness/two/projectTaskRecord",
				uploadUrl:"/api/v1/appbusiness/two/upload",//调用公共的图片上传
				uploadUrlVideo:"/api/v1/appbusiness/two/uploadVideo",//调用公共的视频上传
			}
		},
		onLoad: function (option) {
		    const annItem = JSON.parse(decodeURIComponent(option.item));
			this.reception=annItem;
			console.log("-----------reception---------",this.reception)
			
			//根据任务id 去任务表记录里获取进度数据
			this.projectTaskRecord();
		},
		methods: {
			DelImg(index) {
				uni.showModal({
					title: '你好',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							console.log("myFormData[删除图片]下标----",index)							
							this.tempFileList.splice(index,1)
							console.log(this.tempFileList)
							
							var picString = this.taskRecordFrom.recordPic;	
							var m = picString.split(",");
							for(let l = 0;l < m.length; l++){
								console.log("myFormDatarecordPic返回给后端数据删除前  "+m[l]);	
							}
							m.splice(index,1);
							var recordPic=null;
							for(let i = 0;i < m.length; i++){
								if(recordPic==null){
									recordPic=m[i];
								}else{
									recordPic=recordPic+','+m[i];
								}
								console.log("myFormDatarecordPic返回给后端数据删除后  "+m[i]);	
							}
							this.taskRecordFrom.recordPic=recordPic
							
							console.log("拼接完成返回给后端数据  "+this.taskRecordFrom.recordPic);	
						}
					}
				})
			},
			chooseVideo(){
				var that=this;
			    // 上传视频
			    uni.chooseVideo({
			        maxDuration:60,
			        count: 1,
			        camera: this.cameraList[this.cameraIndex].value,
			    	sizeType: ['original'],
			        sourceType: ['album','camera'],
			        success: (res) => {
			            let videoFile = res.tempFilePath;
			    		that.src = res.tempFilePath; 
			    		that.$http.upload(that.$config.apiUrl+that.uploadUrlVideo, {
			    			filePath: videoFile,
			    			name: 'file'
			    		})
			    		.then(res => {
			    			that.showVideo=true;
			    			that.taskRecordFrom.reportVideo=res.data.message;
			    		})
			    		.catch(err => {
			    			that.$tip.error(err.data.message)
			    		});			    			  
			    	} 			       
			    })            
			},
			
			ViewImage(path,index) {
				console.info("----------点击查看imglist---------------",+this.imgList.length)
				uni.previewImage({
					urls:this.imgList,
					current: index
				});
			},
			
			ChooseImage() {
				var that=this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						
						
					this.imgList = res.tempFilePaths  //这个是储存到当前页面显示的
					console.info("-----------imglist---------------",+this.imgList.length)
					let tempFiles=res.tempFiles;
					tempFiles.forEach(function(item,index){												
						console.log("-------------",item.name);
						console.log("-------------",item.path);
						that.tempFileList.push({
							name:item.name,
							path:item.path,			 												
						})						
					})	
													
					let myimg = res.tempFilePaths;  //把数据直接插入到服务器  然后返回服务器的存储路径，然后插入到数据库
					for(let i = 0;i < myimg.length; i++) {
						console.info("------------myimg--",+myimg[i])
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: myimg[i],
								name: 'file'
							})
							.then(res => {
								/* that.myFormData.avatar=res.data.message; */
								console.log(res.data.message)
								var v = this.taskRecordFrom.recordPic;
								if(v==''){
									that.taskRecordFrom.recordPic=res.data.message;
								}else{
									that.taskRecordFrom.recordPic=v+','+res.data.message;
								}
								
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						}   
							
					}
				});
			},
			
			onSubmit(){
				
				if(this.taskRecordFrom.advanceProgress == this.jd){
								this.$tip.alert('请选择当前进度');
								return false
				}
				if(!this.taskRecordFrom.progressDescription || this.taskRecordFrom.progressDescription==0){
								this.$tip.alert('请填写当前进度描述');
								return false
				}
				//组装数据
				this.taskRecordFrom.taskId=this.reception.id;//任务id
				this.taskRecordFrom.taskName=this.reception.taskName;//任务名称
				this.taskRecordFrom.taskDescription=this.reception.taskDescription;//任务描述
				console.log("------------------------------------",this.taskRecordFrom)
				
				this.$tip.loading();
				this.$http.put('/api/v1/appbusiness/two/taskRecordAdd',this.taskRecordFrom).then(res=>{
					console.log(res)
					this.$tip.loaded();
					if (res.data.success){
						this.$tip.toast('进度上传成功')
						this.timelineList=[];
						this.taskRecordFrom.progressDescription="";
						this.tempFileList=[],//储存页面展示的
						this.imgList=[],//储存点击大图展示的
						this.src="",
						this.showVideo=false;
						console.log("--------------EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE-----------------",this.src)
						this.projectTaskRecord();
						this.$forceUpdate(); //重新渲染
					}
				}).catch(()=>{
					this.$tip.loaded();
					this.$tip.error('进度上传失败')
				});
			},
			
			
			progress(value){
				this.taskRecordFrom.advanceProgress=value;
			},
			projectTaskRecord(){
				this.$http.get(this.url,{params:{id: this.reception.id}}).then(res=>{
					if (res.data.success) {
						var taskRecordList=res.data.result
						console.log("------------------------------------",taskRecordList)
						for(let i =0;i<taskRecordList.length;i++){
				
							var advanceProgress =taskRecordList[i].advanceProgress
							var userName =taskRecordList[i].userName
							var progressDescription =taskRecordList[i].progressDescription
							var uploadTime =taskRecordList[i].uploadTime	
														 
							var taskRecord = {} //定义一个对象
							taskRecord.advanceProgress=advanceProgress;
							taskRecord.userName=userName;
							taskRecord.progressDescription=progressDescription;
							taskRecord.updateTime=uploadTime;
							this.timelineList.push(taskRecord);
							
							if(i==0){
								this.mins=advanceProgress
								this.uslider=advanceProgress
								this.jd=advanceProgress
							}
						}
						console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~",this.timelineList)
					}
					
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})	
			},
			formatDate(text,len){
				if(!text || text.length==0){
					return ''
				}
				if(text.length<len){
					return text;
				}
				return text.substr(0,len)
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	
.custom-style {
	        
}
textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #fff;
}
textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fff;
}
textarea::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fff;
}
textarea::-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #fff;
}


    .u-node {
        width: 44rpx;
        height: 44rpx;
        border-radius: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #d0d0d0;
    }
    .u-order-title {
        color: #333333;
        font-weight: bold;
        font-size: 32rpx;
    }
    .u-order-desc {
        color: rgb(150, 150, 150);
        font-size: 28rpx;
        margin-bottom: 6rpx;
    }
    .u-order-time {
        color: rgb(200, 200, 200);
        font-size: 26rpx;
    }
</style>
